<template>
  <el-dialog
      v-model="add_or_update_handle_group_visible"
      :title=" title_string "
      :close-on-click-modal='false'
      :close-on-press-escape='false'
      :show-close='false'
  >
    <el-form :model="handle_group_variable" :rules="add_or_update_handle_group_rules" ref="add_material_ref"
             :label-position=" 'right' " label-width="150px">
      <el-form-item prop="handle_group_name" label="分组名称">
        <el-input v-model="handle_group_variable.handle_group_name" autocomplete="off"/>
      </el-form-item>
      <el-form-item prop="mnemonic" label="助记码">
        <el-input v-model="handle_group_variable.mnemonic" autocomplete="off"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel_add_material()">取消</el-button>
				<el-button type="primary" @click="add_small()">确定</el-button>
      </span>
    </template>
  </el-dialog>

</template>

<script setup lang="ts">
import {reactive, ref} from "vue";
import {ElMessage, FormInstance, FormRules} from "element-plus";
import {HandleGroupCRUDResponse, HandleGroupList} from "@/api/inventory/handle_group/type.ts";
import {reqHandleGroupCRUD} from "@/api/inventory/handle_group";

let title_string = ''
// 向外暴露函数，用以打开本框和传值
const show_handle_group_CU = (row: HandleGroupList | null, title: '添加' | '修改') => {
  title_string = title + '处理方分组'
  if(title === '修改' && row !== null){
    handle_group_variable.handle_group_id = row.id
    handle_group_variable.handle_group_name = row.name
    handle_group_variable.mnemonic = row.mnemonic
  }else{
    handle_group_variable.handle_group_id = null
    handle_group_variable.handle_group_name = null
    handle_group_variable.mnemonic = null
  }
  add_or_update_handle_group_visible.value = true
}
defineExpose({show_handle_group_CU});

// 接收父组件传来的函数，在添加或修改操作完成后执行函数提醒父组件刷新页面
const emit = defineEmits(['refresh_func'])
const refresh = () => {
  emit('refresh_func')
}

const add_material_ref = ref<FormInstance>()
// 增删改查所需携带的变量
const handle_group_variable = reactive<{
  handle_group_name: string | null
  handle_group_id: number | null
  mnemonic: string | null
}>({
  handle_group_name: null,
  handle_group_id: null,
  mnemonic: null
})
const add_or_update_handle_group_visible = ref(false) // 决定添加和修改框是否显示
const add_or_update_handle_group_rules = reactive<FormRules>({
  handle_group_name: [{
    type: 'string',
    message: '分组名称需要在1到100个字符之间',
    max: 100,
    min: 1,
    required: true,
  }],
  mnemonic: [{
    type: 'string',
    message: '助记码需要在1到100个字符之间',
    max: 100,
    min: 1,
    required: true,
  }],
})

// 关闭添加和修改框
const cancel_add_material = () => {
  add_or_update_handle_group_visible.value = false
}

// 添加小类
const add_small = async () => {
  await add_material_ref.value?.validate()
  if(title_string === '添加处理方分组'){
    const res: HandleGroupCRUDResponse = await reqHandleGroupCRUD({
      mode: "create",
      create: {
        name: handle_group_variable.handle_group_name as string,
        mnemonic: handle_group_variable.mnemonic as string,
      }
    })
    ElMessage.success(res.success?.message)
  }else{
    const res: HandleGroupCRUDResponse = await reqHandleGroupCRUD({
      mode: "update",
      update: {
        name: handle_group_variable.handle_group_name as string,
        mnemonic: handle_group_variable.mnemonic as string,
        handle_group_id: handle_group_variable.handle_group_id as number
      }
    })
    ElMessage.success(res.success?.message)
  }
  add_or_update_handle_group_visible.value = false
  refresh()
}
</script>

<style scoped>

</style>